<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
// import resizeMixins from "@/util/resizeMixins.js";
export default {
  // mixins: [resizeMixins],
  props: {
    data: {
      type: Array,
      default: () => []
    },
    className: {
      type: String,
      default: "chart"
    },
    id: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    chartData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.chart = this.createChart();
  },
  watch: {
    chartData: {
      handler(newVal) {
        this.$nextTick(() => {
          this.renderChart(newVal);
        });
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    createChart() {
      return echarts.init(document.getElementById(this.id));
    },
    renderChart(data) {
      // 根据数据渲染echart图表
      const option = this._createChartOption(data);
      if (this.chart) {
        this.chart.setOption(option);
      }
    },
    _createChartOption() {
      var datas = [
        ////////////////////////////////////////
        [
          { name: "圣彼得堡来客", value: 5.6 },
          { name: "陀思妥耶夫斯基全集", value: 1 },
          { name: "史记精注全译（全6册）", value: 0.8 },
          { name: "加德纳艺术通史", value: 0.5 },
          { name: "表象与本质", value: 0.5 },
          { name: "其它", value: 3.8 }
        ],
        // ////////////////////////////////////////
        [
          { name: "银河帝国5：迈向基地", value: 3.8 },
          { name: "俞军产品方法论", value: 2.3 },
          { name: "艺术的逃难", value: 2.2 },
          { name: "第一次世界大战回忆录（全五卷）", value: 1.3 },
          { name: "Scrum 精髓", value: 1.2 },
          { name: "其它", value: 5.7 }
        ],
        ////////////////////////////////////////
        [
          { name: "克莱因壶", value: 3.5 },
          { name: "投资最重要的事", value: 2.8 },
          { name: "简读中国史", value: 1.7 },
          { name: "你当像鸟飞往你的山", value: 1.4 },
          { name: "表象与本质", value: 0.5 },
          { name: "其它", value: 3.8 }
        ]
      ];
      const option = {
        title: {
          text: "阅读书籍分布",
          left: "center",
          textStyle: {
            color: "#999",
            fontWeight: "normal",
            fontSize: 14
          }
        },
        tooltip: {},
        series: datas.map(function(data, idx) {
          var top = idx * 33.3;
          return {
            type: "pie",
            radius: [40, 50],
            top: "middle",
            height: "33.33%",
            left: top + "%",
            width: 195,
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1
            },
            label: {
              alignTo: "edge",
              formatter: "{name|{b}}\n{time|{c} 小时}",
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999"
                }
              },
              borderColor: "none"
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80
            },
            // labelLayout: function (params) {
            //   const isLeft = params.labelRect.x < myChart.getWidth() / 2;
            //   const points = params.labelLinePoints;
            //   // Update the end point.
            //   points[2][0] = isLeft
            //     ? params.labelRect.x
            //     : params.labelRect.x + params.labelRect.width;
            //   return {
            //     labelLinePoints: points
            //   };
            // },
            data: data
          };
        })
      };
      return option;
    },
    beforeDestroy() {
      this.chart.dispose();
      this.chart = null;
    }
  }
};
</script>

<style></style>
